<template>
  <div>
    <!-- 顶部 -->
    <div class="top">
      <van-icon name="arrow-left" @click="onOut" />
      <span>用户评价</span>
      <div>
        <span class="active">全部</span>
        <span>最新</span>
        <span>价格实惠 38</span>
      </div>
    </div>
    <!-- 评论展示区 -->
    <div class="speak">
      <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
      <span>用户名</span>
      <div>购买方便，价格实惠，鲜而不腥，包装无损坏，品质非常好,推荐下单</div>
    </div>
    <div class="speak" v-for="(item, index) in speakList" :key="index">
      <img :src="item.headerimg" alt="" />
      <span>{{ item.nick }}</span>
      <div>{{ item.message }}</div>
    </div>

    <button @click="onAddSpeak">添加评论</button>
    <van-dialog v-model="show" title="添加评论" show-cancel-button @confirm="onConfirm">
      <input type="text" v-model="msg">
    </van-dialog>
    <div></div>
  </div>
</template>

<script>
import { requestProductSpeak,requestAddProductSpeak } from "@/api/homelx/product";
import { Dialog } from "vant";
export default {
  data() {
    return {
      speakList: {}, //评论数据
        show:false,
        msg:''
    };
  },
  created() {
    this.getSpeak()
    
  },
  methods: {
    async getSpeak(){
        //获取评论
    let id = this.$route.query.id;
    let res = await requestProductSpeak(id);
    let { resultCode, resultInfo } = res.data;
    this.speakList = resultInfo.list;
    },
    //返回上个页面
    onOut() {
      this.$router.go(-1);
    },
    onAddSpeak() {
        this.show=true
      
    },
    async onConfirm(){
        let message =this.msg
        //评论信息不为空时，再请求添加评论接口
        if(message){
            //添加评论
            let res=await requestAddProductSpeak(message,2,this.$route.query.id)
            //重新获取评论渲染
            this.getSpeak()
            
        }
    }
  },
};
</script>

<style lang="scss" scoped>
//顶部
.top {
  margin-top: 10px;
  margin-left: 10px;
  span:nth-child(2) {
    margin-left: 3px;
  }
  div:nth-child(3) {
    font-size: 15px;
    margin-top: 10px;
    margin-left: 10px;
    // color: rgb(94, 93, 93);
    span {
      display: inline-block;
      padding-left: 10px;
      padding-right: 10px;
      line-height: 25px;
      background-color: rgb(230, 225, 225);
      border-radius: 3px;
      color: rgb(133, 127, 127);
      margin-right: 10px;
    }
    .active {
      background-color: rgb(243, 242, 202);
      color: black;
      border: 1px solid rgb(252, 227, 5);
    }
  }
}
//评论展示区
.speak {
  margin-top: 10px;
  margin-left: 10px;
  img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    border-radius: 50%;
    margin-left: 10px;
    margin-right: 10px;
  }
  span {
    font-size: 13px;
    font-weight: 700;
  }
  div {
    font-size: 12px;
    margin-left: 50px;
    margin-right: 15px;
  }
}

button {
  border: none;
  background-color: rgb(251, 255, 8);
  width: 90%;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  line-height: 50px;
  font-size: 22px;
  position: fixed;
  bottom: 10px;
  left: 20px;
}

.van-dialog{
    input{
    width: 80%;
    margin-left: 20px;
    border: none;
}
} 
</style>